<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>路径导航</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript"></script>


</head>

<body>
    <div class="container">
        <div class="row">
            <!-- 路径导航 ol有序列表  breadcrumb面包屑的意思(路径导航) -->
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">产品列表</a></li>
                <li class="active">水果</li>
            </ol>
        </div>

        <br>
        <br>
        <br>

        <div class="row">
            <div class="dropdown">
                <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    下拉菜单
                    <span class="caret"></span>
                </div>
                <ul class="dropdown-menu">
                    <li><a href="#">菜单一</a></li>
                    <li><a href="#">菜单二</a></li>
                    <li><a href="#">菜单三</a></li>
                </ul>
            </div>
        </div>

    </div>
</body>

</html>